<%@ page import="com.xlro.service.BookService" %>
<%@ page import="com.xlro.domain.Book" %>
<%@ page import="com.xlro.domain.BrowseBook" %>
<%@ page import="com.xlro.service.UserService" %>
<%@ page import="java.util.ArrayList" %>
<%--
  Created by IntelliJ IDEA.
  User: xlro
  Date: 2021/4/22
  Time: 16:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浏览记录</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="jQuery/css/htmleaf-demo.css">
    <link rel="stylesheet" href="jQuery/css/style.css"/>
    <style>

        #top-image {
            background: linear-gradient(
                    rgba(0, 0, 0, 0.2),
                    rgba(0, 0, 0, 0.2)
            ), url('jQuery/images/1.jpg') no-repeat fixed;
            position:fixed ;
            top:0;
            width:100%;
            z-index:0;
            height:100%;
        }


        html, body {
            font-size: 14px;
            width: 100%;
            height: 100%;
            color: #fff;
        }
        input{
            color: #fff!important;
        }
        input::-webkit-input-placeholder{
            color: #fff!important;
        }

        .login-layout {
            margin-top: 25%;
            position: relative;
            width: 90%;
            left: 50%;
            border-radius: .75rem;
            transform: translate(-50%, -50%);
            background: rgba(204,142,103, 0.3);
            padding: 100px 80px 80px 50px;
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;

        }
    </style>
</head>
<body>

<%@include file="alert.jsp"%>

<div id="top-image">
    <div class="login">
        <div class="login-layout">


            <fieldset class="layui-elem-field layui-field-title" style="">
                <legend> <%
                    String username = (String)session.getAttribute("username");
                    out.println();
                    out.print(username+"的浏览记录");
                %> </legend>
            </fieldset>


            <%
                BookService bs = new BookService();
                String userId = new UserService().getUser((String) session.getAttribute("username")).getId();
                ArrayList<BrowseBook> browseBooks = bs.getBrowseBook(userId);

//                BrowseBook browseBook = browseBooks.get(1);

                int line = 0;

            %>


            <%
                int size = browseBooks.size();
                int cols = size / 5;
                for (int j = 0 ; j < cols; j++){
                    if(j>5){
                        break;
                    }
            %>


            <%--            browseBooks.size()--%>

            <ul class="layui-timeline" style="color: #0C0C0C;padding-right: 36px;">
                <% for (int i = 0+j; i < 5+j; i++) {
                    BrowseBook browseBook = browseBooks.get(i);%>
                <%--                    <% for (int i = 0; i < 5; i++) {--%>

                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis" style="width: 20px;height: 20px;">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text" style="color: #0C0C0C">
                        <h5 class="layui-timeline-title" style="font-size: 12px;"><%out.print(browseBook.getDate());%></h5>
                        <p style="color: #0C0C0C">
                            <%out.print("《"+browseBook.getBookName()+"》"); %>
                            <br> <%out.print("&nbsp;&nbsp;"+browseBook.getBookPosition());%>
                            <br> <%out.print("&nbsp;&nbsp;"+(browseBook.getStatus().equals("1")?"有存货":"借阅完"));%>
                            <br>
                            <%--                            <i class="layui-icon"></i>--%>
                        </p>
                    </div>

                </li>
                <%
                    } %>
            </ul>


            <%
                } %>



        </div>
    </div>
</div>


<button name='btn1' class="layui-btn layui-btn-radius" style="position: absolute;right: 10%;bottom: 10%" type="button" >清空</button>



<script src="layui/layui.js"></script>
<script src="jQuery/js/jquery-1.11.0.min.js"></script>
<script src="jQuery/js/ios-parallax.js"></script>


<script>
    layui.use('layer', function(){

        $("[name=btn1]").click(function () {
            //iframe窗

            layer.open({
                type: 2,
                title: false,
                closeBtn: 0, //不显示关闭按钮
                maxmin: false, //开启最大化最小化按钮
                shade: [0],
                shadeClose: true,
                shade: false,
                area: ['30%', '10%'],
                offset: 'rb', //弹出
                // time: 0,
                time: 1000,
                anim: 2,
                content: ['./deleteCollBookRecord.jsp?', 'no']
            });

        })

    });
</script>
<script>
    layui.use('layer', function(){
        var layer = layui.layer;
        layer.config({
            skin: 'demo-class'
        })

    });
</script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#top-image').iosParallax({
            movementFactor: 500,
            dampenFactor: 100
        });
    });
</script>
</body>
</html>